<template>
  <view class="orders-container">
    <!-- 顶部导航栏 -->
    <view class="top-navbar">
      <view 
        class="nav-item" 
        v-for="(item, index) in navItems" 
        :key="index"
        :class="{ active: activeNav === item.status }"
        @click="switchNav(item.status)"
      >
        {{ item.label }}
      </view>
    </view>

    <!-- 订单列表 -->
    <scroll-view class="orders-scroll" scroll-y>
      <view class="orders-list" v-if="filteredOrders.length > 0">
        <view 
          class="order-item" 
          v-for="(order, index) in filteredOrders" 
          :key="index"
          @click="goToOrderDetail(order.id)"
        >
          <view class="order-header">
            <text class="order-number">订单号: {{ order.number }}</text>
            <text class="order-status" :class="getStatusClass(order.status)">{{ order.status }}</text>
          </view>
          
          <view class="order-content">
            <view class="court-info">
              <text class="court-name">{{ order.courtName }}</text>
              <text class="court-type">{{ order.courtType }}</text>
            </view>
            
            <view class="order-details">
              <text class="detail-item">📅 {{ order.date }}</text>
              <text class="detail-item">⏰ {{ order.time }}</text>
              <text class="detail-item">👨‍👩‍👧‍👦 {{ order.people }}人</text>
            </view>
            
            <view class="order-price">
              <text class="price-label">总价:</text>
              <text class="price-amount">￥{{ order.price }}</text>
            </view>
          </view>
        </view>
      </view>
      
      <view class="empty-orders" v-else>
        <image class="empty-icon" src="/static/image/table.png" mode="aspectFit"></image>
        <text class="empty-text">暂无订单</text>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

// 导航项
const navItems = ref([
  { label: '全部', status: 'all' },
  { label: '待核销', status: 'pending' },
  { label: '已核销', status: 'verified' },
  { label: '已退款', status: 'refunded' }
])

// 当前激活的导航
const activeNav = ref('all')

// 模拟订单数据
const orders = ref([
  {
    id: 1,
    number: 'TT20231201001',
    status: '待核销',
    courtName: '市体育馆乒乓球馆',
    courtType: '红双喜专业台桌',
    date: '2023-12-15',
    time: '14:00-16:00',
    people: 2,
    price: 80
  },
  {
    id: 2,
    number: 'TT20231202005',
    status: '待核销',
    courtName: '高校乒乓俱乐部',
    courtType: '双鱼训练台桌',
    date: '2023-12-18',
    time: '19:00-21:00',
    people: 4,
    price: 120
  },
  {
    id: 3,
    number: 'TT20231128012',
    status: '已核销',
    courtName: '社区活动中心',
    courtType: '标准竞赛台桌',
    date: '2023-12-01',
    time: '10:00-12:00',
    people: 2,
    price: 60
  },
  {
    id: 4,
    number: 'TT20231125008',
    status: '已核销',
    courtName: '专业训练基地',
    courtType: 'TIBHAR专业台桌',
    date: '2023-11-28',
    time: '15:00-17:00',
    people: 3,
    price: 90
  },
  {
    id: 5,
    number: 'TT20231120015',
    status: '已退款',
    courtName: '大学体育中心',
    courtType: '双鱼教学台桌',
    date: '2023-11-25',
    time: '18:00-20:00',
    people: 2,
    price: 70
  },
  {
    id: 6,
    number: 'TT20231115022',
    status: '已退款',
    courtName: '职工活动中心',
    courtType: '红双喜训练台桌',
    date: '2023-11-20',
    time: '13:00-15:00',
    people: 4,
    price: 80
  }
])

// 过滤后的订单
const filteredOrders = computed(() => {
  if (activeNav.value === 'all') {
    return orders.value
  }
  
  // 根据状态过滤订单
  const statusMap = {
    pending: '待核销',
    verified: '已核销',
    refunded: '已退款'
  }
  
  return orders.value.filter(order => order.status === statusMap[activeNav.value])
})

// 切换导航
const switchNav = (status) => {
  activeNav.value = status
}

// 获取状态样式类
const getStatusClass = (status) => {
  switch (status) {
    case '待核销': return 'status-pending'
    case '已核销': return 'status-verified'
    case '已退款': return 'status-refunded'
    default: return ''
  }
}

// 跳转到订单详情页
const goToOrderDetail = (orderId) => {
  // 跳转到订单详情页，并传递订单ID
  uni.navigateTo({
    url: `/pages/mine/orderDetail?id=${orderId}`
  })
}
</script>

<style lang="scss">
.orders-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.top-navbar {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #e0e0e0;
  padding: 15px 0;
  
  .nav-item {
    flex: 1;
    text-align: center;
    padding: 8px 0;
    font-size: 16px;
    color: #666;
    
    &.active {
      color: #165dff;
      font-weight: bold;
      border-bottom: 2px solid #165dff;
    }
  }
}

.orders-scroll {
  height: calc(100vh - 50px);
}

.orders-list {
  padding: 15px;
}

.order-item {
  background-color: #fff;
  border-radius: 10px;
  padding: 15px;
  margin-bottom: 15px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  
  &:last-child {
    margin-bottom: 0;
  }
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 10px;
  
  .order-number {
    font-size: 14px;
    color: #666;
  }
  
  .order-status {
    font-size: 14px;
    padding: 4px 10px;
    border-radius: 4px;
    
    &.status-pending {
      background-color: #fff7e6;
      color: #faad14;
    }
    
    &.status-verified {
      background-color: #f0f9f4;
      color: #07c160;
    }
    
    &.status-refunded {
      background-color: #f9f9f9;
      color: #999;
    }
  }
}

.order-content {
  .court-info {
    margin-bottom: 10px;
    
    .court-name {
      font-size: 16px;
      font-weight: bold;
      color: #333;
      display: block;
      margin-bottom: 4px;
    }
    
    .court-type {
      font-size: 13px;
      color: #999;
    }
  }
  
  .order-details {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 10px;
    
    .detail-item {
      font-size: 13px;
      color: #666;
    }
  }
  
  .order-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
    
    .price-label {
      font-size: 14px;
      color: #666;
    }
    
    .price-amount {
      font-size: 18px;
      font-weight: bold;
      color: #f5222d;
    }
  }
}

.empty-orders {
  text-align: center;
  padding: 50px 0;
  
  .empty-icon {
    width: 100px;
    height: 100px;
    margin-bottom: 20px;
    opacity: 0.5;
  }
  
  .empty-text {
    font-size: 16px;
    color: #999;
  }
}
</style>